<template>
	<view class="content">
		<view class="btn">RGB</view>
		
		  <view class="uni-padding-wrap uni-common-mt">
					<view class="slide">
						<view class="text">R</view>
						<slider class="slider" value="50" min="0" max="255" @change="sliderChangeR" show-value />
					</view>
					<view class="slide">
						<view class="text">G</view>
						<slider class="slider" value="40" min="0" max="255" @change="sliderChangeG" show-value />
					</view>
					<view class="slide">
						<view class="text">B</view>
						<slider class="slider" value="30" min="0" max="255" @change="sliderChangeB" show-value />
					</view>
		  </view>
			
			<view class="sub">
				  <view class="tijiao" @click="cancel">取消</view>
					  <view class="tijiao" @click="submit">提交</view>
			</view>
						
	</view>
</template>

<script>
	import { reactive, toRefs, ref, onMounted,defineEmits } from "vue";
	export default {
	
			setup() {
				function sliderChangeR(e){
					console.log(e,"111111111111111111111111111")
				}
				function sliderChangeG(e){
					console.log(e,"22222222222222222222222222222")
				}
				function sliderChangeB(e){
					console.log(e,"333333333333333333333333333")
				}
				function cancel(){
					console.log("取消")
				}
				function submit(){
					console.log("提交")
				}
				return {
					sliderChangeR,
					sliderChangeG,
					sliderChangeB,
					cancel,
					submit
				}
			}
		}
	
</script>

<style lang="scss" scoped>
	.content{
		width: 650rpx;
		height: 400rpx;
		border: 1rpx solid #ccc;
		margin:300rpx  50rpx ;
		z-index: 100;
		.btn{
			width: 150rpx;
			height: 50rpx;
			background-color: crimson;
			text-align: center;
			margin: 2% 38%;
			color: azure;
			
		}
		.slide{
			display: flex;
			.slider{
				width: 500rpx;
			}
			.text{
				margin: 15rpx;
				
			}
			
		}
		.sub{
			display: flex;
			// margin:10rpx 100rpx;
			justify-content:space-around;
			text-align: center;
			// .cancel{
			// 	width: 120rpx;
			// 	height: 60rpx;
			// 	background-color: skyblue;
			// 	border-radius: 10rpx;
				
			// }
			.tijiao{
				width: 120rpx;
				height: 60rpx;
					background-color: skyblue;
					border-radius: 10rpx;
					color: azure;
					font-size: 30rpx;
				
				
			}
		}
	}
	
</style>